<template>
  <div class="container">
    <common-header :title="title"></common-header>
    <no-data :category="2" :message="noDataMessage" v-show="!isData"></no-data>
    <div class="file_list" v-show="isData" ref="fileList">
      <ul>
        <li v-for="item in mountData">
          <div class="con">
            <div class="file_img"></div>
            <div class="right_dec">
              <router-link to="/docs_list/video/preview">
                <div class="file_title">
                  {{str}}
                </div>
                <div class="clearfix file_desc">
                  <p class="file_time fl">2017-10-30 15:00</p>
                  <p class="file_size fr">205.08M</p>
                </div>
              </router-link>
            </div>
            <div class="pulldown" @click="pulldown($event)"></div>
            <div class="file_sel clearfix">
              <div class="file_download fl font_s">
                <b></b>
                下载
              </div>
              <div class="file_del fr font_s">
                <b></b>
                删除
              </div>
            </div>
          </div>
        </li>
        <li class="no_more_data" ref="noMore">
          <p>加载完毕，没有更多了~</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
//  import $ from 'jquery'

  // 引入头部公共组件
  import Header from '../subComponents/header.vue'

  // 引入no-data组件
  import noData from '../subComponents/nodata.vue'

  // 引入公共方法
  import { pullDown, lazyLoad, nomoreData } from '../../common'

  export default {
    data () {
      return {
        eTarget: {}, // 记录每次下滑的事件源
        str: '[TSKS][神探夏洛克SO1]2017BD1080P.X264.AAC.E14English...Mandarin字幕.mp4',
        title: '视频',
        noDataMessage: '暂无视频',
        isPull: true,
        isData: true, // 是否有数据
        data: [1, 2, 3, 4, 5],
        mountData: [],
        noMoreData: false
      }
    },
    components: {
      'common-header': Header,
      'no-data': noData
    },
    methods: {
      pulldown (e) {
        pullDown(e, this)
      }
    },
    created () {
      lazyLoad(this.data, this.mountData, this)
    },
    mounted () {
      nomoreData(this)
    }
  }
</script>
<style scoped>
  .container {
    background-color: #f7f7f7;
    width: 100%;
    height: 100%;
  }

  /* 文件列表 */
  .file_list ul {
    width: 100%;
  }

  .file_list ul li {
    height: 2.1rem;
    overflow: hidden;
    padding: 0 0.28rem;
  }

  .file_list ul .no_more_data {
    height: 0;
    background-color: #f4f4f4;
  }

  .file_list ul .no_more_data p {
    line-height: 2.1rem;
  }

  .file_list ul li .file_sel {
    position: absolute;
    left: -0.28rem;
    top: 2.1rem;
    width: 7.5rem;
    height: 2.1rem;
    background-color: #fff;
    padding: 0 2.5rem 0 3rem;
  }

  .file_list ul li .con {
    width: 100%;
    height: 100%;
    border-bottom: 0.01rem solid #eee;
    position: relative;
    padding: 0.25rem 0;
  }

  .file_list ul li .file_sel .file_del b {
    display: block;
    width: 0.36rem;
    height: 0.39rem;
    margin: 0.75rem auto 0;
    background: url('../../assets/images/sprite.png') no-repeat -1.77rem -1.54rem;
    background-size: 10rem 6rem;
  }

  .file_list ul li .file_sel .font_s {
    font-size: 0.2rem;
    color: #666;
    line-height: 0.4rem;
  }

  .file_list ul li .file_sel .file_download b {
    display: block;
    width: 0.46rem;
    height: 0.39rem;
    margin: 0.75rem 0 0 0;
    background: url('../../assets/images/sprite.png') no-repeat -2.43rem -1.51rem;
    background-size: 10rem 6rem;
  }

  .file_list ul li .file_img {
    width: 1.6rem;
    height: 1.6rem;
    background: url('../../assets/images/docslist/video.png');
    background-size: 100% 100%;
    position: absolute;
    top: 0.25rem;
    left: 0;
    z-index: 999;
  }

  .file_list ul li .right_dec {
    width: 100%;
    padding: 0 0.64rem 0 1.82rem;
  }

  .file_list ul li .right_dec .file_desc {
    width: 4.1rem;
  }

  .file_list ul li .right_dec .file_title {
    width: 4rem;
    height: 1.2rem;
    font-size: 0.32rem;
    color: #333;
    line-height: 0.4rem;
    word-wrap: break-word;
    word-break: break-all;
    text-align: left;
    margin-bottom: 0.1rem;
    text-overflow: ellipsis; /* 溢出的文字显示...*/
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .file_list ul li .right_dec .file_time, .file_list ul li .right_dec .file_size {
    font-size: 0.24rem;
    color: #ccc;
    line-height: 0.3rem;
  }
</style>
